<template>
  <div id="app" class="admin-app">
    <header class="admin-header">
      <div class="header-content">
        <h1>调度系统 - 管理后台</h1>
        <nav class="header-nav">
          <a href="/index.html" class="nav-link">首页</a>
          <a href="/login.html" class="nav-link">登录</a>
          <a href="/mobile.html" class="nav-link">移动端</a>
        </nav>
      </div>
    </header>
    
    <main class="admin-main">
      <div class="sidebar">
        <nav class="sidebar-nav">
          <a href="#" class="nav-item active">
            <span>📊</span>
            <span>仪表盘</span>
          </a>
          <a href="#" class="nav-item">
            <span>🚚</span>
            <span>车辆管理</span>
          </a>
          <a href="#" class="nav-item">
            <span>👥</span>
            <span>人员管理</span>
          </a>
          <a href="#" class="nav-item">
            <span>📋</span>
            <span>任务管理</span>
          </a>
          <a href="#" class="nav-item">
            <span>📈</span>
            <span>数据统计</span>
          </a>
          <a href="#" class="nav-item">
            <span>⚙️</span>
            <span>系统设置</span>
          </a>
        </nav>
      </div>
      
      <div class="content">
        <div class="dashboard">
          <h2>仪表盘</h2>
          
          <div class="stats-grid">
            <div class="stat-card">
              <div class="stat-icon">🚚</div>
              <div class="stat-content">
                <h3>在线车辆</h3>
                <p class="stat-number">24</p>
                <p class="stat-change positive">+12%</p>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="stat-icon">👥</div>
              <div class="stat-content">
                <h3>在线司机</h3>
                <p class="stat-number">18</p>
                <p class="stat-change positive">+8%</p>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="stat-icon">📋</div>
              <div class="stat-content">
                <h3>今日任务</h3>
                <p class="stat-number">156</p>
                <p class="stat-change positive">+23%</p>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="stat-icon">✅</div>
              <div class="stat-content">
                <h3>完成率</h3>
                <p class="stat-number">94%</p>
                <p class="stat-change positive">+2%</p>
              </div>
            </div>
          </div>
          
          <div class="recent-tasks">
            <h3>最近任务</h3>
            <div class="task-list">
              <div class="task-item" v-for="task in recentTasks" :key="task.id">
                <div class="task-info">
                  <h4>{{ task.title }}</h4>
                  <p>{{ task.description }}</p>
                  <span class="task-time">{{ task.time }}</span>
                </div>
                <div class="task-status" :class="task.status">
                  {{ task.statusText }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const recentTasks = ref([
  {
    id: 1,
    title: '配送任务 #001',
    description: '将包裹从仓库A配送至客户B',
    time: '14:30',
    status: 'completed',
    statusText: '已完成'
  },
  {
    id: 2,
    title: '调度任务 #002',
    description: '安排车辆前往指定地点接货',
    time: '16:00',
    status: 'in-progress',
    statusText: '进行中'
  },
  {
    id: 3,
    title: '配送任务 #003',
    description: '紧急配送任务，需要优先处理',
    time: '17:30',
    status: 'pending',
    statusText: '待处理'
  }
])
</script>

<style lang="scss" scoped>
.admin-app {
  min-height: 100vh;
  background-color: $bg-secondary;
  display: flex;
  flex-direction: column;
}

.admin-header {
  background-color: $bg-dark;
  color: $text-light;
  padding: $spacing-4;
  box-shadow: $shadow-md;
  
  .header-content {
    max-width: $container-max-width;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  h1 {
    margin: 0;
    font-size: $font-size-xl;
    font-weight: $font-weight-semibold;
  }
  
  .header-nav {
    display: flex;
    gap: $spacing-4;
    
    .nav-link {
      color: $text-light;
      text-decoration: none;
      padding: $spacing-2 $spacing-3;
      border-radius: $border-radius-base;
      transition: $transition-base;
      
      &:hover {
        background-color: rgba($white, 0.1);
      }
    }
  }
}

.admin-main {
  flex: 1;
  display: flex;
  max-width: $container-max-width;
  margin: 0 auto;
  width: 100%;
  padding: $spacing-4;
  gap: $spacing-6;
}

.sidebar {
  width: 250px;
  background-color: $white;
  border-radius: $border-radius-lg;
  padding: $spacing-4;
  @include shadow(md);
  height: fit-content;
  
  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: $spacing-2;
    
    .nav-item {
      display: flex;
      align-items: center;
      gap: $spacing-3;
      padding: $spacing-3;
      border-radius: $border-radius-base;
      text-decoration: none;
      color: $text-secondary;
      transition: $transition-base;
      
      &:hover {
        background-color: $bg-secondary;
        color: $text-primary;
      }
      
      &.active {
        background-color: $primary-color;
        color: $white;
      }
      
      span:first-child {
        font-size: $font-size-lg;
      }
    }
  }
}

.content {
  flex: 1;
  
  .dashboard {
    background-color: $white;
    border-radius: $border-radius-lg;
    padding: $spacing-6;
    @include shadow(md);
    
    h2 {
      color: $text-primary;
      margin-bottom: $spacing-6;
      font-size: $font-size-2xl;
      font-weight: $font-weight-semibold;
    }
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: $spacing-4;
  margin-bottom: $spacing-8;
  
  .stat-card {
    background-color: $bg-secondary;
    border-radius: $border-radius-lg;
    padding: $spacing-4;
    display: flex;
    align-items: center;
    gap: $spacing-4;
    
    .stat-icon {
      font-size: $font-size-3xl;
      width: 60px;
      height: 60px;
      @include flex-center;
      background-color: $primary-color;
      color: $white;
      border-radius: $border-radius-lg;
    }
    
    .stat-content {
      h3 {
        color: $text-secondary;
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        margin: 0 0 $spacing-1 0;
      }
      
      .stat-number {
        color: $text-primary;
        font-size: $font-size-2xl;
        font-weight: $font-weight-bold;
        margin: 0 0 $spacing-1 0;
      }
      
      .stat-change {
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        margin: 0;
        
        &.positive {
          color: $success-color;
        }
        
        &.negative {
          color: $danger-color;
        }
      }
    }
  }
}

.recent-tasks {
  h3 {
    color: $text-primary;
    margin-bottom: $spacing-4;
    font-size: $font-size-xl;
    font-weight: $font-weight-semibold;
  }
  
  .task-list {
    display: flex;
    flex-direction: column;
    gap: $spacing-3;
  }
  
  .task-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: $spacing-4;
    background-color: $bg-secondary;
    border-radius: $border-radius-base;
    
    .task-info {
      h4 {
        color: $text-primary;
        margin: 0 0 $spacing-1 0;
        font-size: $font-size-base;
        font-weight: $font-weight-medium;
      }
      
      p {
        color: $text-secondary;
        margin: 0 0 $spacing-1 0;
        font-size: $font-size-sm;
      }
      
      .task-time {
        color: $text-muted;
        font-size: $font-size-xs;
      }
    }
    
    .task-status {
      padding: $spacing-1 $spacing-3;
      border-radius: $border-radius-full;
      font-size: $font-size-xs;
      font-weight: $font-weight-medium;
      
      &.completed {
        background-color: rgba($success-color, 0.1);
        color: $success-color;
      }
      
      &.in-progress {
        background-color: rgba($info-color, 0.1);
        color: $info-color;
      }
      
      &.pending {
        background-color: rgba($warning-color, 0.1);
        color: $warning-color;
      }
    }
  }
}

// 响应式设计
@include respond-to(md) {
  .admin-main {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    
    .sidebar-nav {
      flex-direction: row;
      overflow-x: auto;
      
      .nav-item {
        white-space: nowrap;
      }
    }
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@include respond-to(sm) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .admin-header .header-content {
    flex-direction: column;
    gap: $spacing-3;
  }
}
</style> 